<template>
  <div id="Endorsement" :style="{minHeight: currHeight + 'px'}">
    <!-- 导航栏 -->
    <van-nav-bar title="我的代言费" left-text="返回" left-arrow
          @click-left="onClickLeft"
             @click-right="onClickRight"
    >
      <van-icon name="ellipsis" slot="right" />
    </van-nav-bar>
    <!-- 内容 -->
    <div class="count">
        <!-- 搜索框 -->
        <div class="count_search">
            <input placeholder="输入关键字" class="search_input">
            <img src="../assets/images/我的粉丝&我的代言费/search.png" class="search_pho">
        </div>
        <!-- 第一个块 -->
        <div class="consumption"
            v-for="(item,index) in lists"
            :key="index">
            <div class="consumption_top">
                <p class="consumption_top_time">{{item.data}}</p>
                <p class="consumption_top_middle">
                    <img :src="item.images" class="consumption_top_portrait">
                    <span  class="consumption_top_name">{{item.name}}</span>
                </p>
                <p class="consumption_top_fans">{{item.fans}}</p>
            </div>
            <div class="consumption_bottom">
                <p class="consumption_left">消费金额：￥<span class="consumption_price">{{item.price}}</span></p>
                <p class="consumption_right">收益：￥<span class="consumption_earnings">{{item.earnings}}</span></p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Hipline',
  data () {
    return {
        lists:[{
            index:1,
            data:'2016-02-25',
            images:require('../assets/images/我的粉丝&我的代言费/fans.png'),
            name:"董大伟",
            price:"1000.00",
            earnings:"10.00",
            fans:"一级粉丝"
        },
        {
            index:2,
            data:'2016-02-25',
            images:require('../assets/images/我的粉丝&我的代言费/fans.png'),
            name:"董大伟",
            price:"1000.00",
            earnings:"10.00",
            fans:"二级粉丝"
        }],
        currHeight:''
    }
  },
  methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
    showPopup() {
      this.show = true;
    },
  },
    mounted(){
    this.currHeight = document.documentElement.clientHeight
    window.onresize = () => {
      this.currHeight = document.documentElement.clientHeight     
    }
  } 
} 
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
// 搜索框
#Endorsement{
    // height:1320px;
    background-color: #f9f9f9;
}
.count_search{
    width:100%;
    height:90px;
    position: relative;
    top:90px;
    box-sizing: border-box;
    padding-top:13px;
    .search_input{
        box-sizing: border-box;
        width:90%;
        height:55px;
        background-size: 5%;
        padding-left: 40%;
        border-radius: 10px;
        border: none;
        display: block;
        margin:0 auto;
    }
    .search_pho{
        position: absolute;
        width:5%;
        top:26px;
        left:280px;
    }
}
.consumption{
    top:70px;
    width:100%;
    // height:212px;
    padding-bottom: 50px;
    box-sizing: border-box;
    margin-top:20px;
    background-color: #fff;
    position: relative;
    .consumption_top{
        display: flex;
        justify-content: center ;
        align-content: center;
        .consumption_top_time{
            font-size:24px;
            width:30%;
            margin-top:30px;
            color:#a7a7a7;
        }
        .consumption_top_middle{
            line-height: 80px;
            img{
                width: 15%;
            }
            .consumption_top_name{
                font-size: 20px;
            }
        }
        .consumption_top_fans{
            font-size:24px;
            margin-top:30px;
            color:#333333;
        }
    }
    .consumption_bottom{
        width:100%;
        display: flex;
        justify-content: center ;
        .consumption_left{
            width:300px;
            height:26px;
            color:#999999;
            font-size:24px;
            margin-top: 30px;
        }
        .consumption_price{
            font-size:24px;           
        }
        .consumption_right{
            width:200px;
            height:26px;
            color:#999999;
            font-size:24px;
            margin-top: 30px;
            margin-left: 80px;
        }
        .consumption_earnings{
            font-size:24px;
            color:#ff4242;
        }
    }
}
//212
</style>
